<template>
  <div class="auth-container">
    <!-- 品牌展示区 -->
    <div class="brand-section">
      <!-- 装饰元素 -->
      <div class="brand-decorations">
        <div class="floating-shape shape-1"></div>
        <div class="floating-shape shape-2"></div>
        <div class="floating-shape shape-3"></div>
        <div class="floating-shape shape-4"></div>
      </div>
      
      <!-- 主品牌内容 -->
      <div class="brand-content">
        <div class="logo-container">
          <div class="logo-circle">
            <span class="logo-emoji">💫</span>
          </div>
        </div>
        <h1 class="brand-logo">情绪日记</h1>
        <p class="brand-slogan">记录情绪，治愈自己</p>
        <div class="brand-highlight">
          <span class="highlight-dot"></span>
          <span class="highlight-text">用心感受每一刻</span>
        </div>
      </div>
    </div>
    
    <!-- 表单区 -->
    <div class="form-section">
      <!-- 背景装饰 -->
      <div class="form-decoration">
        <div class="decor-element decor-1"></div>
        <div class="decor-element decor-2"></div>
        <div class="decor-element decor-3"></div>
      </div>
      
      <div class="form-container">
        <!-- 欢迎信息 -->
        <div class="welcome-section">
          <h2 class="welcome-title">{{ activeTab === 'login' ? '欢迎回来' : '创建账户' }}</h2>
          <p class="welcome-subtitle">{{ activeTab === 'login' ? '继续记录您的情绪之旅' : '开始您的情绪记录之旅' }}</p>
        </div>
        
        <!-- 切换栏 -->
        <div class="auth-tabs">
          <button 
            :class="['tab-btn', { active: activeTab === 'login' }]"
            @click="switchToLogin"
          >
            登录
          </button>
          <button 
            :class="['tab-btn', { active: activeTab === 'register' }]"
            @click="switchToRegister"
          >
            注册
          </button>
        </div>
        
        <!-- 登录表单 -->
        <form 
          v-if="activeTab === 'login'" 
          class="auth-form"
          @submit.prevent="handleLogin"
        >
          <!-- 手机号输入框 -->
          <div class="form-group">
            <div class="input-wrapper">
              <span class="input-icon">📱</span>
              <input
                type="tel"
                v-model="loginForm.phone"
                placeholder="请输入手机号"
                class="form-input"
                :class="{ error: loginFormErrors.phone }"
                maxlength="11"
              />
            </div>
            <span v-if="loginFormErrors.phone" class="error-message">{{ loginFormErrors.phone }}</span>
          </div>
          
          <!-- 密码输入区 -->
          <div class="form-group">
            <div class="input-wrapper">
              <span class="input-icon">🔒</span>
              <input
                :type="loginForm.showPassword ? 'text' : 'password'"
                v-model="loginForm.password"
                placeholder="请输入密码"
                class="form-input"
                :class="{ error: loginFormErrors.password }"
              />
              <button type="button" class="toggle-password" @click="toggleLoginPassword">
                {{ loginForm.showPassword ? '👁️‍🗨️' : '👁️' }}
              </button>
            </div>
            <span v-if="loginFormErrors.password" class="error-message">{{ loginFormErrors.password }}</span>
          </div>
          
          <!-- 登录按钮 -->
          <button
            type="submit"
            class="submit-btn login-btn"
            :disabled="!loginForm.agreeTerms"
          >
            登录
          </button>
          
          <!-- 辅助链接 -->
          <div class="auxiliary-links">
            <a href="#" class="forgot-password">忘记密码？</a>
          </div>
          
          <div class="switch-link">
            <span>还没账号？</span>
            <a href="#" class="switch-tab" @click.prevent="switchToRegister">去注册</a>
          </div>
          
          <!-- 协议勾选 -->
          <div class="terms-section">
            <label class="checkbox-label">
              <input
                type="checkbox"
                v-model="loginForm.agreeTerms"
                class="custom-checkbox"
              />
              <span class="checkbox-indicator"></span>
            </label>
            <span class="terms-text">
              我已阅读并同意
              <a href="#" class="terms-link">《用户协议》</a>
              <a href="#" class="terms-link">《隐私政策》</a>
            </span>
          </div>
        </form>
        
        <!-- 注册表单 -->
        <form 
          v-else-if="activeTab === 'register'" 
          class="auth-form"
          @submit.prevent="handleRegister"
        >
          <!-- 手机号输入框 -->
          <div class="form-group">
            <div class="input-wrapper">
              <span class="input-icon">📱</span>
              <input
                type="tel"
                v-model="registerForm.phone"
                placeholder="请输入手机号"
                class="form-input"
                :class="{ error: registerFormErrors.phone }"
                maxlength="11"
              />
            </div>
            <span v-if="registerFormErrors.phone" class="error-message">{{ registerFormErrors.phone }}</span>
          </div>
          
          <!-- 密码输入框 -->
          <div class="form-group">
            <div class="input-wrapper">
              <span class="input-icon">🔒</span>
              <input
                :type="registerForm.showPassword ? 'text' : 'password'"
                v-model="registerForm.password"
                placeholder="请设置6-16位密码"
                class="form-input"
                :class="{ error: registerFormErrors.password }"
              />
              <button type="button" class="toggle-password" @click="toggleRegisterPassword">
                {{ registerForm.showPassword ? '👁️‍🗨️' : '👁️' }}
              </button>
            </div>
            <span v-if="registerFormErrors.password" class="error-message">{{ registerFormErrors.password }}</span>
          </div>
          
          <!-- 确认密码输入框 -->
          <div class="form-group">
            <div class="input-wrapper">
              <span class="input-icon">🔒</span>
              <input
                :type="registerForm.showConfirmPassword ? 'text' : 'password'"
                v-model="registerForm.confirmPassword"
                placeholder="请再次输入密码"
                class="form-input"
                :class="{ error: registerFormErrors.confirmPassword }"
              />
              <button type="button" class="toggle-password" @click="toggleRegisterConfirmPassword">
                {{ registerForm.showConfirmPassword ? '👁️‍🗨️' : '👁️' }}
              </button>
            </div>
            <span v-if="registerFormErrors.confirmPassword" class="error-message">{{ registerFormErrors.confirmPassword }}</span>
          </div>
          
          <!-- 注册按钮 -->
          <button
            type="submit"
            class="submit-btn register-btn"
            :disabled="!registerForm.agreeTerms"
          >
            注册
          </button>
          
          <div class="switch-link">
            <span>已有账号？</span>
            <a href="#" class="switch-tab" @click.prevent="switchToLogin">去登录</a>
          </div>
          
          <!-- 协议勾选 -->
          <div class="terms-section">
            <label class="checkbox-label">
              <input
                type="checkbox"
                v-model="registerForm.agreeTerms"
                class="custom-checkbox"
              />
              <span class="checkbox-indicator"></span>
            </label>
            <span class="terms-text">
              我已阅读并同意
              <a href="#" class="terms-link">《用户协议》</a>
              <a href="#" class="terms-link">《隐私政策》</a>
            </span>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 成功提示 -->
    <div 
      v-if="showSuccessToast" 
      class="success-toast"
      :class="{
        'success-toast-register': successMessage.includes('注册成功'),
        'error-toast': isErrorMessage
      }"
    >
      <span class="toast-icon">{{ isErrorMessage ? '❌' : (successMessage.includes('注册成功') ? '🎉' : '✅') }}</span>
      <span class="toast-message">{{ successMessage }}</span>
      <div v-if="!isErrorMessage && successMessage.includes('注册成功')" class="toast-progress"></div>
    </div>
  </div>
</template>

<script>
import authService from '../services/authService';

export default {
  name: 'AuthView',
  data() {
    return {
      activeTab: 'login', // 默认显示登录
      
      // 登录表单数据
      loginForm: {
        phone: '',
        password: '',
        showPassword: false,
        agreeTerms: false
      },
      loginFormErrors: {
        phone: '',
        password: ''
      },
      
      // 注册表单数据
      registerForm: {
        phone: '',
        password: '',
        confirmPassword: '',
        showPassword: false,
        showConfirmPassword: false,
        agreeTerms: false
      },
      registerFormErrors: {
        phone: '',
        password: '',
        confirmPassword: '',
        agreeTerms: ''
      },
      
      // 成功提示
      showSuccessToast: false,
      successMessage: '',
      successToastTimer: null,
      isErrorMessage: false,
      
      // 加载状态
      isLoading: false
    }
  },
  computed: {
    // 验证手机号格式
    isPhoneValid() {
      const phoneRegex = /^1[3-9]\d{9}$/
      return phoneRegex.test(this.loginForm.phone)
    },
    isRegisterPhoneValid() {
      const phoneRegex = /^1[3-9]\d{9}$/
      return phoneRegex.test(this.registerForm.phone)
    }
  },
  methods: {
    // 切换到登录表单
    switchToLogin() {
      this.activeTab = 'login'
      // 清空注册表单数据
      this.clearRegisterForm()
    },
    
    // 切换到注册表单
    switchToRegister() {
      this.activeTab = 'register'
      // 清空登录表单数据
      this.clearLoginForm()
    },
    
    // 清空登录表单
    clearLoginForm() {
      this.loginForm = {
        phone: '',
        password: '',
        showPassword: false,
        agreeTerms: false
      }
      this.loginFormErrors = {
        phone: '',
        password: ''
      }
    },
    
    // 清空注册表单
    clearRegisterForm() {
      this.registerForm = {
        phone: '',
        password: '',
        confirmPassword: '',
        showPassword: false,
        showConfirmPassword: false,
        agreeTerms: false
      }
      this.registerFormErrors = {
        phone: '',
        password: '',
        confirmPassword: '',
        agreeTerms: ''
      }
    },
    

    
    // 切换注册密码显示
    toggleRegisterPassword() {
      this.registerForm.showPassword = !this.registerForm.showPassword
    },
    
    // 切换确认密码显示
    toggleRegisterConfirmPassword() {
      this.registerForm.showConfirmPassword = !this.registerForm.showConfirmPassword
    },
    
    // 切换登录密码显示
    toggleLoginPassword() {
      this.loginForm.showPassword = !this.loginForm.showPassword
    },
    
    // 验证登录表单
    validateLoginForm() {
      let isValid = true
      
      // 重置错误信息
      this.loginFormErrors = {
        phone: '',
        password: ''
      }
      
      // 校验手机号
      if (!this.loginForm.phone) {
        this.loginFormErrors.phone = '请输入手机号'
        isValid = false
      } else if (!this.isPhoneValid) {
        this.loginFormErrors.phone = '手机号格式不正确'
        isValid = false
      }
      
      // 校验密码
      if (!this.loginForm.password) {
        this.loginFormErrors.password = '请输入密码'
        isValid = false
      } else if (this.loginForm.password.length < 6 || this.loginForm.password.length > 16) {
        this.loginFormErrors.password = '密码长度应为6-16位'
        isValid = false
      }
      
      return isValid
    },
    
    // 验证注册表单
    validateRegisterForm() {
      let isValid = true
      
      // 重置错误信息
      this.registerFormErrors = {
        phone: '',
        password: '',
        confirmPassword: '',
        agreeTerms: ''
      }
      
      // 校验手机号
      if (!this.registerForm.phone) {
        this.registerFormErrors.phone = '请输入手机号'
        isValid = false
      } else if (!this.isRegisterPhoneValid) {
        this.registerFormErrors.phone = '手机号格式不正确'
        isValid = false
      } else {
        this.registerFormErrors.phone = ''
      }
      
      // 校验密码
      if (!this.registerForm.password) {
        this.registerFormErrors.password = '请设置密码'
        isValid = false
      } else if (this.registerForm.password.length < 6 || this.registerForm.password.length > 16) {
        this.registerFormErrors.password = '密码长度应为6-16位'
        isValid = false
      } else {
        this.registerFormErrors.password = ''
      }
      
      // 校验确认密码
      if (!this.registerForm.confirmPassword) {
        this.registerFormErrors.confirmPassword = '请再次输入密码'
        isValid = false
      } else if (this.registerForm.confirmPassword !== this.registerForm.password) {
        this.registerFormErrors.confirmPassword = '两次输入的密码不一致'
        isValid = false
      }
      
      // 校验是否同意协议
      if (!this.registerForm.agreeTerms) {
        this.registerFormErrors.agreeTerms = '请阅读并同意用户协议和隐私政策'
        isValid = false
      } else {
        this.registerFormErrors.agreeTerms = ''
      }
      
      return isValid
    },
    
    // 处理登录
    async handleLogin() {
      if (!this.validateLoginForm()) {
        return
      }

      try {
        this.isLoading = true;
        let response;
        
        // 手机号+密码登录
        response = await authService.loginWithPassword(this.loginForm.phone, this.loginForm.password);

        // 保存登录状态
        authService.saveLoginState(response);

        // 显示成功提示
        this.showSuccess('登录成功，欢迎回来！');
        
        // 延迟跳转
        setTimeout(() => {
          const redirectPath = this.$route.query.redirect || '/';
          this.$router.push(redirectPath);
        }, 1500);

      } catch (error) {
        console.error('登录失败:', error);
        
        // 判断错误类型并处理
        if (error.message && error.message.includes('用户不存在')) {
          // 用户不存在，跳转到注册界面并显示提示
          this.showError('该账号未注册，请先注册');
          setTimeout(() => {
            this.switchToRegister();
            // 预填手机号到注册表单
            this.registerForm.phone = this.loginForm.phone;
          }, 1500);
        } else {
          // 其他错误（如密码错误、服务器错误等），显示友好的错误信息
          // 检查是否是500错误
          if (error.message && error.message.includes('500')) {
            this.showError('服务器暂时不可用，请稍后重试');
          } else {
            this.loginFormErrors.phone = error.message || '登录失败，请检查手机号和密码是否正确';
          }
        }
      } finally {
        this.isLoading = false;
      }
    },
    
    // 处理注册
    async handleRegister() {
      // 验证表单
      if (!this.validateRegisterForm()) {
        return
      }
      
      // 显示加载状态
      this.isLoading = true
      
      try {
        // 使用手机号前几位作为默认用户名
        const defaultUsername = `用户${this.registerForm.phone.substring(0, 7)}`;
        
        // 调用注册API
        const response = await authService.register(this.registerForm.phone, this.registerForm.password, defaultUsername)
        
        // 保存登录状态
        authService.saveLoginState(response)
        
        // 显示成功提示 - 使用更友好的注册成功信息
        this.showSuccess('🎉 注册成功！欢迎加入情绪日记 🎉')
        
        // 注册成功后跳转到首页
        setTimeout(() => {
          this.$router.push('/')
        }, 1500)
      } catch (error) {
        this.showError(error.message || '注册失败，请稍后重试')
        console.error('注册失败:', error)
      } finally {
        // 隐藏加载状态
        this.isLoading = false
      }
    },
    
    // 显示成功提示
    showSuccess(message) {
      this.successMessage = message
      this.showSuccessToast = true
      this.isErrorMessage = false
      
      // 清除之前的定时器
      if (this.successToastTimer) {
        clearTimeout(this.successToastTimer)
      }
      
      // 设置新的定时器
      this.successToastTimer = setTimeout(() => {
        this.showSuccessToast = false
      }, 2000)
    },
    
    // 显示错误提示
    showError(message) {
      this.successMessage = message
      this.showSuccessToast = true
      this.isErrorMessage = true
      
      // 清除之前的定时器
      if (this.successToastTimer) {
        clearTimeout(this.successToastTimer)
      }
      
      // 设置新的定时器
      this.successToastTimer = setTimeout(() => {
        this.showSuccessToast = false
      }, 2000)
    }
  }
}
</script>

<style scoped>
/* 治愈系全局样式变量 */
:root {
  /* 治愈系主色调 - 柔和的渐变色彩 */
  --healing-purple: #9d88d5;
  --healing-pink: #e6a8c7;
  --healing-blue: #8fd2e9;
  --healing-green: #a9d18e;
  --healing-yellow: #f8d38a;
  
  /* 辅助色 */
  --light-bg: #f5f9ff;
  --input-bg: #ffffff;
  --text-primary: #222222;
  --text-secondary: #555555;
  --border-color: #e8e8f0;
  --error-color: #f17889;
  --success-color: #44ba75;
  
  /* 阴影 */
  --soft-shadow: 0 8px 30px rgba(157, 136, 213, 0.1);
  --hover-shadow: 0 12px 40px rgba(157, 136, 213, 0.2);
}

/* 主容器 */
.auth-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, var(--light-bg) 0%, #f0f7ff 50%, #f5f9ff 100%);
  position: relative;
  overflow: hidden;
}

/* 治愈系装饰背景元素 */
.auth-container::before,
.auth-container::after,
.auth-container::nth-child(3) {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: float 15s ease-in-out infinite;
  z-index: 0;
}

.auth-container::before {
  top: -10%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, var(--healing-blue), var(--healing-green));
}

.auth-container::after {
  bottom: -10%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, var(--healing-purple), var(--healing-pink));
  animation-delay: 3s;
}

/* 中心装饰元素 */
.auth-container::nth-child(3) {
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, var(--healing-yellow), var(--healing-pink));
  opacity: 0.2;
  animation-delay: 1.5s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-20px, 20px) scale(1.05);
  }
  50% {
    transform: translate(0, 40px) scale(1);
  }
  75% {
    transform: translate(20px, 20px) scale(0.95);
  }
}

/* 背景渐变流动动画 */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 品牌展示区 */
.brand-section {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
  background: linear-gradient(135deg, #8fd2e9 0%, #9d88d5 50%, #e6a8c7 100%);
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 5px 0 30px rgba(0, 0, 0, 0.1);
  animation: gradientFlow 15s ease infinite;
  background-size: 200% 200%;
}

/* 装饰元素 */
.brand-decorations {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.floating-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.shape-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 10%;
  animation: float 15s ease-in-out infinite;
}

.shape-2 {
  width: 150px;
  height: 150px;
  bottom: 15%;
  right: 15%;
  animation: float 12s ease-in-out infinite reverse;
}

.shape-3 {
  width: 100px;
  height: 100px;
  top: 40%;
  right: 20%;
  animation: float 10s ease-in-out infinite;
  animation-delay: 2s;
}

.shape-4 {
  width: 80px;
  height: 80px;
  bottom: 30%;
  left: 25%;
  animation: float 18s ease-in-out infinite;
  animation-delay: 5s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  25% {
    transform: translate(-20px, -20px) scale(1.1);
    opacity: 0.3;
  }
  50% {
    transform: translate(0, 20px) scale(0.9);
    opacity: 0.7;
  }
  75% {
    transform: translate(20px, -10px) scale(1.05);
    opacity: 0.4;
  }
}

/* 主品牌内容 - 重点突出情绪日记标题 */
.brand-content {
  text-align: center;
  margin-bottom: 40px;
  animation: fadeInUp 0.6s ease-out;
  position: relative;
  z-index: 2;
  padding: 30px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
  transform: translateY(0);
  transition: all 0.3s ease;
}

.brand-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* 确保动画关键帧定义存在 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo容器 */
.logo-container {
  margin-bottom: 30px;
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.logo-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.logo-emoji {
  font-size: 48px;
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 品牌标题动画效果 */
.brand-title {
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--healing-purple), var(--healing-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  animation: fadeInUp 1s ease-out, pulse 3s infinite;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  text-shadow: 0 2px 10px rgba(157, 136, 213, 0.2);
}

.brand-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--healing-purple), var(--healing-blue));
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(157, 136, 213, 0.3);
}

/* 品牌Logo */
.brand-logo {
  font-size: 52px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -1px;
  color: black;
  position: relative;
  display: inline-block;
}

.brand-logo::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: black;
  border-radius: 2px;
}

@keyframes shimmer {
  0% {
    opacity: 0.6;
    transform: translateX(-50%) scaleX(0.8);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.2);
  }
  100% {
    opacity: 0.6;
    transform: translateX(-50%) scaleX(0.8);
  }
}

/* 品牌描述文字 */
.brand-slogan {
  font-size: 18px;
  color: var(--text-secondary);
  margin-top: 12px;
  animation: fadeInUp 1.2s ease-out;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
}

/* 品牌亮点 */
.brand-highlight {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.15);
  padding: 12px 24px;
  border-radius: 30px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.highlight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  animation: blink 2s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.highlight-text {
  font-size: 16px;
  font-weight: 600;
  color: black;
  opacity: 1;
  letter-spacing: 1px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .brand-section {
    width: 100%;
    height: 300px;
    padding: 30px 20px;
  }
  
  .logo-circle {
    width: 100px;
    height: 100px;
  }
  
  .logo-emoji {
    font-size: 40px;
  }
  
  .brand-logo {
    font-size: 40px;
  }
  
  .brand-slogan {
    font-size: 18px;
  }
  
  .shape-1 {
    width: 150px;
    height: 150px;
  }
  
  .shape-2 {
    width: 120px;
    height: 120px;
  }
  
  .shape-3 {
    width: 80px;
    height: 80px;
  }
  
  .shape-4 {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 480px) {
  .brand-section {
    height: 280px;
    padding: 20px;
  }
  
  .logo-circle {
    width: 80px;
    height: 80px;
  }
  
  .logo-emoji {
    font-size: 32px;
  }
  
  .brand-logo {
    font-size: 36px;
  }
  
  .brand-slogan {
    font-size: 16px;
  }
  
  .brand-highlight {
    padding: 10px 20px;
  }
  
  .highlight-text {
    font-size: 14px;
  }
}

/* 表单区 */
.form-section {
  width: 60%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

/* 表单背景装饰 */
.form-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.decor-element {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  filter: blur(50px);
}

.decor-1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -100px;
  background: linear-gradient(135deg, var(--healing-pink), transparent);
}

.decor-2 {
  width: 300px;
  height: 300px;
  bottom: -150px;
  left: -150px;
  background: linear-gradient(135deg, var(--healing-blue), transparent);
}

.decor-3 {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 30%;
  background: linear-gradient(135deg, var(--healing-green), transparent);
}

/* 表单容器 */
.form-container {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  overflow: hidden;
  animation: fadeInUp 0.7s ease-out;
}

.form-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 10% 20%, rgba(157, 136, 213, 0.05) 0%, transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(143, 210, 233, 0.05) 0%, transparent 30%);
  z-index: -1;
}

/* 欢迎区域 */
.welcome-section {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.welcome-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--healing-purple), var(--healing-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeInUp 0.8s ease-out;
  letter-spacing: -0.5px;
  position: relative;
  display: inline-block;
}

.welcome-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--healing-purple), var(--healing-blue));
  border-radius: 2px;
  animation: fadeInUp 1s ease-out;
}

.welcome-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  animation: fadeInUp 0.9s ease-out;
  max-width: 400px;
  margin: 20px auto 0;
  font-weight: 500;
}

.welcome-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.welcome-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  opacity: 0.8;
  line-height: 1.5;
}

.form-container:hover {
  box-shadow: var(--hover-shadow);
  transform: translateY(-5px);
}

/* 表单装饰元素 */
.form-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--healing-purple), var(--healing-pink), var(--healing-blue));
  background-size: 200% 100%;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 登录方式切换 */
.login-method-switch {
  margin-bottom: 16px;
}

.method-tabs {
  display: flex;
  background: rgba(157, 136, 213, 0.05);
  border-radius: 12px;
  padding: 4px;
}

.method-tab {
  flex: 1;
  padding: 8px 16px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: black;
  transition: all 0.3s ease;
}

.method-tab.active {
  background: linear-gradient(135deg, var(--healing-purple), var(--healing-pink));
  color: black;
  box-shadow: 0 2px 8px rgba(157, 136, 213, 0.2);
}

.method-tab:hover:not(.active) {
  background: rgba(157, 136, 213, 0.1);
  color: black;
}

/* 切换栏 */
.auth-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.auth-tabs::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.tab-btn {
  background: none;
  border: none;
  font-size: 18px;
  font-weight: 600;
  color: black;
  padding: 12px 24px;
  margin: 0 10px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 8px 8px 0 0;
}

.tab-btn:hover {
  color: black;
  background: rgba(157, 136, 213, 0.05);
}

.tab-btn.active {
  color: black;
  background: rgba(157, 136, 213, 0.05);
  font-weight: 700;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--healing-purple), var(--healing-pink));
  border-radius: 1.5px;
  box-shadow: 0 2px 8px rgba(157, 136, 213, 0.3);
  animation: tabSlide 0.3s ease-out;
}

@keyframes tabSlide {
  from {
    width: 0;
    left: 50%;
  }
  to {
    width: 100%;
    left: 0;
  }
}

/* 表单样式 */
.auth-form {
  animation: fadeIn 0.5s ease-in-out;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 表单组 */
.form-group {
  margin-bottom: 24px;
  position: relative;
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }
.form-group:nth-child(4) { animation-delay: 0.4s; }

/* 焦点状态增强 */
.input-wrapper:focus-within {
  border-color: var(--healing-purple);
  box-shadow: 0 4px 20px rgba(157, 136, 213, 0.15);
  transform: translateY(-1px);
  background: #ffffff;
}

/* 确保表单容器具有良好的阴影效果 */
.form-container {
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.06),
    0 2px 10px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.form-container:hover {
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.08),
    0 4px 20px rgba(0, 0, 0, 0.04);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 16px;
  border: 2px solid var(--border-color);
  background: var(--input-bg);
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.input-wrapper:focus-within {
  border-color: var(--healing-purple);
  box-shadow: 0 4px 20px rgba(157, 136, 213, 0.15);
  transform: translateY(-1px);
  background: #ffffff;
}

.input-icon {
  padding: 0 16px;
  font-size: 20px;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.input-wrapper:focus-within .input-icon {
  color: var(--healing-purple);
  transform: scale(1.1);
}

.form-input {
  flex: 1;
  height: 56px;
  padding: 0 16px 0 0;
  border: none;
  outline: none;
  font-size: 16px;
  color: var(--text-primary);
  background: transparent;
  transition: all 0.3s ease;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.form-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
  font-weight: 300;
}

.input-wrapper.error {
  border-color: var(--error-color);
  background: rgba(241, 120, 137, 0.03);
}

.input-wrapper.error .input-icon {
  color: var(--error-color);
}

/* 验证码输入区 */
.verification-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
}

.code-btn {
  background: linear-gradient(135deg, var(--healing-purple), var(--healing-pink));
  color: black;
  border: none;
  border-radius: 16px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 130px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(157, 136, 213, 0.2);
  position: relative;
  overflow: hidden;
}

.code-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.code-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(157, 136, 213, 0.3);
  letter-spacing: 0.5px;
}

.code-btn:hover:not(:disabled)::before {
  width: 300px;
  height: 300px;
}

.code-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(157, 136, 213, 0.2);
}

.code-btn:disabled {
  background: linear-gradient(135deg, var(--border-color), #e0e0e0);
  color: black;
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
  box-shadow: none;
  letter-spacing: normal;
}

.code-btn:disabled::before {
  display: none;
}

/* 密码切换按钮 */
.toggle-password {
  position: absolute;
  right: 16px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  color: var(--text-secondary);
  transition: all 0.3s ease;
  border-radius: 50%;
}

.toggle-password:hover {
  color: var(--healing-pink);
  background-color: rgba(244, 147, 176, 0.1);
  transform: scale(1.1);
}

/* 错误信息 */
.error-message {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--error-color);
  opacity: 0.9;
  animation: shake 0.3s ease-in-out;
  font-weight: 500;
}

/* 输入框震动效果 */
.input-wrapper.shake {
  animation: shake 0.5s ease-in-out;
}

/* 密码强度指示器 */
.password-strength-container {
  margin-top: 12px;
}

.strength-bars {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.strength-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background-color: #e8e8f0;
  transition: all 0.3s ease;
}

.strength-bar.active {
  animation: growWidth 0.5s ease-out;
}

@keyframes growWidth {
  from { width: 0; }
  to { width: 100%; }
}

.strength-text {
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: color 0.3s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  color: black;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  animation: fadeInUp 0.8s ease-out;
}

.login-btn {
  background: linear-gradient(135deg, var(--healing-purple), var(--healing-pink));
  box-shadow: 0 6px 20px rgba(157, 136, 213, 0.3);
}

.register-btn {
  background: linear-gradient(135deg, var(--healing-blue), var(--healing-green));
  box-shadow: 0 6px 20px rgba(143, 210, 233, 0.3);
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
}

.submit-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  color: black;
  transform: none;
  box-shadow: none;
  letter-spacing: 0.5px;
}

/* 按钮渐变光效 */
.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.submit-btn:hover::before {
  left: 100%;
}

/* 按钮脉冲效果 */
.submit-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.8s, height 0.8s;
}

.submit-btn:hover::after {
  width: 400px;
  height: 400px;
}

/* 增强标签和标题的字体显示 */
.auth-form label,
.auth-header h2,
.brand-title {
  font-weight: 600;
  color: var(--text-primary);
}

.auth-form label {
  font-size: 16px;
  margin-bottom: 8px;
  display: block;
}

.submit-btn:disabled {
  background: var(--border-color);
  color: black;
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
  box-shadow: none;
}

/* 辅助链接 */
.auxiliary-links {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.forgot-password {
  color: var(--healing-purple);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  padding-bottom: 2px;
  transition: all 0.3s ease;
}

.forgot-password::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--healing-pink);
  transition: width 0.3s ease;
}

.forgot-password:hover {
  color: var(--healing-pink);
}

.forgot-password:hover::after {
  width: 100%;
}

.switch-link {
  text-align: center;
  margin: 20px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.switch-tab {
  color: var(--healing-purple);
  cursor: pointer;
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
  transition: all 0.3s ease;
}

.switch-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--healing-pink);
  transition: width 0.3s ease;
}

.switch-tab:hover {
  color: var(--healing-pink);
}

.switch-tab:hover::after {
  width: 100%;
}

/* 协议勾选 */
.terms-section {
  display: flex;
  align-items: center;
  margin-top: 24px;
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 20px; /* 确保行高与复选框高度一致 */
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
  flex-shrink: 0;
  height: 20px; /* 明确设置高度与复选框一致 */
}

.custom-checkbox {
  width: 0;
  height: 0;
  opacity: 0;
}

.checkbox-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  background-color: white;
}

.custom-checkbox:checked + .checkbox-indicator {
  background: linear-gradient(135deg, var(--healing-purple), var(--healing-blue));
  border-color: var(--healing-purple);
  animation: fillCheckbox 0.3s ease;
}

@keyframes fillCheckbox {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.checkbox-indicator::after {
    content: '✓';
    position: absolute;
    display: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
  }
  
  .custom-checkbox:checked + .checkbox-indicator::after {
    display: block;
  }

.terms-text {
  flex: 1;
}

.terms-link {
  color: var(--healing-purple);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 1px;
}

.terms-link:hover {
  color: var(--healing-pink);
  text-decoration: underline;
}

/* 成功提示 */
.success-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  padding: 15px 25px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10000;
  border: 2px solid var(--success-color);
  transition: all 0.3s ease;
}

/* 错误提示样式 */
.error-toast {
  border-color: var(--error-color);
}

.error-toast .toast-message {
  color: #ff0000;
  font-weight: bold;
  font-size: 16px;
}

.toast-icon {
  font-size: 20px;
}

.toast-message {
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 500;
}

/* 注册成功特殊样式 */
.success-toast-register {
  border-color: var(--healing-purple);
  background: linear-gradient(135deg, #f5f1ff 0%, #ffffff 100%);
}

.success-toast-register .toast-message {
  color: var(--healing-purple);
  font-weight: bold;
}

/* 进度条动画 */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: rgba(157, 136, 213, 0.5);
  border-radius: 0 0 0 8px;
  animation: progressBar 1.5s linear;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes progressBar {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}



/* 响应式设计 */
@media (max-width: 768px) {
  .auth-container {
    flex-direction: column;
  }
  
  .brand-section {
    width: 100%;
    height: 200px;
    padding: 20px;
  }
  
  .form-section {
    width: 100%;
    padding: 20px;
  }
  
  .brand-logo {
    font-size: 32px;
  }
  
  .form-input {
    font-size: 16px;
    height: 52px;
    letter-spacing: normal;
  }
  
  .submit-btn {
    height: 52px;
    font-size: 16px;
    letter-spacing: normal;
    margin-top: 8px;
  }
  
  .welcome-title {
    font-size: 24px;
  }
  
  .welcome-subtitle {
    font-size: 14px;
  }
  
  .code-btn {
    min-width: 110px;
    font-size: 13px;
    padding: 12px 16px;
  }
  
  .verification-wrapper {
    gap: 8px;
  }
  
  .floating-shape {
    display: none;
  }
  
  .form-container {
    padding: 35px 24px;
    border-radius: 24px;
  }
  
  .tab-btn {
    margin: 0 5px;
  }
}

/* 移动端优化 */
@media (max-width: 480px) {
  .form-container {
    padding: 0 10px;
  }
  
  .tab-btn {
    font-size: 16px;
    padding: 0 20px 10px;
  }
  
  .verification-wrapper {
    flex-direction: column;
  }
  
  .input-wrapper {
    width: 100%;
  }
  
  .code-btn {
    width: 100%;
  }
}
</style>